<!DOCTYPE html>  
<html lang="zh">  
<head>  
<meta charset="UTF-8">  
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>天气预报</title>
<link rel="stylesheet" href="https://cdn.staticfile.net/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/qweather-icons@1.6.0/font/qweather-icons.css">
<style>  
    body {  
        font-family: Arial, sans-serif;  
        margin: 0;  
        padding: 0;  
        display: flex;  
        flex-direction: column;  
        align-items: center;  
        justify-content: center;  
        height: 100vh;  
        background-color: #f2f2f2;  
    }  
  
    .weather-container {  
        width: 80%;  
        max-width: 400px;  
        padding: 20px;  
        background-color: #fff;  
        border-radius: 10px;  
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);  
        text-align: center;  
    }  
  
    h1 {  
        margin-bottom: 20px;  
    }  
  
    .weather-info {  
        margin-bottom: 10px;  
    }  
  
    .weather-icon {  
        font-size: 40px;  
        margin-bottom: 10px;  
    }  
  
    .temp {  
        font-size: 24px;  
        font-weight: bold;  
    }  
  
    .description {  
        font-size: 16px;  
        color: #666;  
    }  
</style>

</head>  
<body>  
<div class="weather-container">  
    <h3 class="cityname">佛山市</h3>  
	<div class="weather-info">  
			<img class="weatherico" src="#" alt=""/><p class="temp"></p><p class="description"></p>
    </div>  
	<div class="input-group mb-3">
<!--
		<div class="input-group-append">
			<span class="input-group-text">city name:</span>
		</div>
-->
		<input type="text" class="form-control cityinput" value="foshan">
		<div class="input-group-append">
			<button class="input-group-text searchcity btn btn-success">Search</button>
			<a href="#" class="input-group-text btn btn-primary">gitee</a>
		  </div>
	</div>
</div>  
</body>  
	<script src="https://cdn.staticfile.net/jquery/3.2.1/jquery.min.js"></script>
	<script>
		function getinfo(){
			$.ajax({
				url:'https://api.openweathermap.org/data/2.5/weather?units=metric&q='+$('.cityinput').val()+'&appid=623bfde28aa6c3befdf737f6d08eeffc',
				type:'get',
				dataType:'json',
				success:function(res){
					console.log(res);
					$('.cityname').text(res['name']);
					document.querySelector('.weatherico').src='https://openweathermap.org/img/w/'+res['weather'][0]['icon']+'.png';
					$('.temp').text(res['main']['temp']+'°C');
					$('.description').text('湿度:'+res['main']['humidity']+'% 风速:'+res['wind']['speed']+'米/秒')
				}
			})
		}
		getinfo();
		
		$('.searchcity').click(function(){
	
			getinfo();
		})
	</script>
</html>